<#import "../../../config/config.ftl" as config />
<#import "../../../template/template.ftl" as template />

<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>菜单</title>

<@config.humaneCSS></@config.humaneCSS>
<@config.gcss></@config.gcss>
<@config.bootCSS></@config.bootCSS>
<@config.wavesCSS></@config.wavesCSS>
<@config.animateCSS></@config.animateCSS>
<@config.styleCSS></@config.styleCSS>
<@config.themesCSS></@config.themesCSS>
<@config.bootTableCSS></@config.bootTableCSS>
<@config.appCSS></@config.appCSS>
    <@config.sweetalertCSS></@config.sweetalertCSS>
</head>
<body class="">
<@template.pageLoad></@template.pageLoad>
<div class="overlay"></div>
<@template.topBar></@template.topBar>
<section>

<@template.leftSidebar flag="menu"></@template.leftSidebar>
    <@template.rightSidebar></@template.rightSidebar>
</section>
<section class="content">
    <div class="container-fluid">
        <div id="toolbar">
            <button type="button" class="btn btn-info waves-effect" onclick="doAdd();">新增</button>
        </div>
        <table id="menuInfo">
        </table>
    </div>
</section>
<div class="modal fade middle-modal" id="menuModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="defaultModalLabel">菜单新增</h4>
            </div>
            <div class="modal-body">
                <div class="row clearfix">
                    <form id="menuForm" method="POST">

                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" placeholder="菜单名称" name="name" id="name" required/>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" placeholder="url" name="url" id="url" required/>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="number" class="form-control" placeholder="排序" name="sort" id="sort" required/>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" placeholder="菜单图标" name="icon" id="icon"/>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <select   class="ms form-control" onchange="doChoiceParentMenu(this);" name="step" required id="menustep">
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <select   id="parentMenu" class="ms form-control" name="parentId" required >
                                        <option value="">父菜单</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="id" value="0" id="id">
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link waves-effect" id="exec" onclick="doExec();">保存</button>
                <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<@template.footer></@template.footer>
<@config.jqueryJS></@config.jqueryJS>
<@config.jquerySerializeJsonJS></@config.jquerySerializeJsonJS>
<@config.bootJS></@config.bootJS>
<@config.jqueryFormJS></@config.jqueryFormJS>
<@config.bootSelectJS></@config.bootSelectJS>
<@config.jquerySrollJS></@config.jquerySrollJS>
<@config.bootTableJS></@config.bootTableJS>
<@config.wavesJS></@config.wavesJS>
<@config.laydateJS></@config.laydateJS>
<@config.jqueryCountToJs></@config.jqueryCountToJs>
<@config.jqueryValidateJS></@config.jqueryValidateJS>
<@config.humaneJS></@config.humaneJS>
<@config.sweetalertJS></@config.sweetalertJS>
<@config.adminJS></@config.adminJS>
<@config.demoJS></@config.demoJS>
<@config.appJS></@config.appJS>


<script type="application/javascript">
    var validator
    $(function () {
        $.App.home.loadPage({
            id: "menuInfo",
            url: '${base}/sys/menu/loadpage.json',
            columns: [
                {field: "name", title: "菜单名称"},
                {field: "url", title: "菜单url"},
                {field: "icon", title: "图标"},
                {field: "sort", title: "排序"},
                {field: "step", title: "层级"},
                {field: "updateTimeStr", title: "修改时间"},
                {field: "id", title: "操作",formatter:function(value,row,index){
                    var code = row.code;
                    var btn='<button type="button" class="btn bg-red btn-xs waves-effect" onclick="doRemove(\''+code+'\')">删除</button> <button type="button" class="btn bg-pink btn-xs waves-effect" onclick="doEdit('+value+')">编辑</button>';
                    return btn;
                }}
            ],
            toolbar: "#toolbar",
            detailView:true,
            detailFormatter:function(index, row){
                var div= loadChildrenMenu(row);
                console.info("子菜单: "+ div);
                return div;
            },
            queryParams:function(params){
                var obj= {
                    order: params.order,
                    offset: params.offset,
                    limit: params.limit
                };
                return obj;
            }
        });
        validator=  $.App.home.validateForm("menuForm");
        initMenuStep();

        $('#menuModal').on('hide.bs.modal', function () {
            $("#menustep").removeAttrs("disabled")
            $("#parentMenu").removeAttrs("disabled");
            $("#id").val(0);
            $.App.home.clearFormData("menuForm");
        })
    });

    function doAdd() {
        $("#menuModal").modal();
    }

    function doExec() {
        var valid = $("#menuForm").valid();
        if(!valid) {
            return;
        }
        var id = $("#id").val();
        var url="";
        if ("0" == id) {   //新增
            url="${base}/sys/menu/add.json";
        } else {
            url="${base}/sys/menu/update.json";
        }
        $("#menuForm").ajaxSubmit({
            url: url,
            type: "post",
            success: function (resp) {
                if (resp.code == 200) {
                    $('#menuModal').modal('hide')
                    $.App.home.topMessage("success","操作成功");
                    $.App.home.clearFormData("menuForm")
                    $.App.home.reloadTable("menuInfo");
                    initMenuStep();
                }else{
                    $.App.home.topMessage("error",resp.msg);
                }
            },
            error:function(resp){
                $.App.home.topMessage("error",JSON.stringify(resp));
            }
        });
    }

    function doRemove(code){
        $.App.home.showConfirmMessage("确定要删除菜单吗？改菜单关联的子菜单都会被删除",deleteByCode,code);
    }

    function  doEdit(id){
        $.ajax({
            url:'${base}/sys/menu/getmenubyid.json',
            data:{id:id},
            success:function(resp){
                if(resp.code ==200){
                   doEditView(resp.data);
                }else{
                    $.App.home.showErrorMessage();
                }
            },
            error:function(){
                $.App.home.showErrorMessage()
            }
        });
    }

    /**
     * 插入修改的信息
      * @param data
     */
    function  doEditView(data){
        $("#name").val(data.name);
        $("#url").val(data.url);
        $("#sort").val(data.sort);
        $("#icon").val(data.icon);
        var menustep = data.step;
        $("#menustep").val(menustep);
        insertParentM(menustep);
        var parentId = data.parentId;
        $("#parentMenu").val(parentId);
        $("#id").val(data.id);
        $("#menustep").attr("disabled","disabled");
        $("#parentMenu").attr("disabled","disabled")
        $("#menuModal").modal();
    }

    function  insertParentM(value){
        $.ajax({
            url:"${base}/sys/menu/loadmenubystep.json",
            data:{step:value},
            async:false,
            success:function(resp){
                if(resp.code==200){
                    insertParentMenu(resp.data);
                }else{
                    alert("获取父菜单失败，请重新操作")
                }
            },
            error:function(){
                alert("获取父菜单失败，请重新操作")
            }
        });
    }

    function deleteByCode(code){
        $.ajax({
            url:"${base}/sys/menu/deletemenubycode.json",
            data:{code:code},
            success:function(resp){
                if(resp.code == 200){
                    $.App.home.showSuccessMessage();
                    $.App.home.reloadTable("menuInfo");
                    initMenuStep();
                }else{
                    $.App.home.showErrorMessage();
                }
            },
            error:function(){
                $.App.home.showErrorMessage();
            }
        });
    }


    function  doChoiceParentMenu(obj){
        var value = $(obj).val();
        $.ajax({
            url:"${base}/sys/menu/loadmenubystep.json",
            data:{step:value},
            success:function(resp){
                if(resp.code==200){
                    insertParentMenu(resp.data);
                }else{
                    alert("获取父菜单失败，请重新操作")
                }
            },
            error:function(){
                alert("获取父菜单失败，请重新操作")
            }
        });
    }

    function  initMenuStep(){
        $.ajax({
            url:"${base}/sys/menu/loadmenustep.json",
            type:"post",
            success:function(resp){
                insertMenuStep(resp.data);
            },
            error:function(){
            }
        })
    }

    function insertMenuStep(stepmenus){
        var option = "";
        for(var index=0;index<stepmenus.length;index++){
            option = option+ '<option value="'+stepmenus[index].value+'">'+stepmenus[index].name+'</option>';
        }
        $("#menustep").empty().append(option)
    }


    function insertParentMenu(menus){
        var option=' <option value="">父菜单</option>';
        for(var index=0;index<menus.length;index++){
            option = option+ '<option value="'+menus[index].id+'">'+menus[index].name+'</option>';
        }
        $("#parentMenu").empty().append(option);
    }


    function loadChildrenMenu(row){
        var parentId = row.id;
        var div="";
        $.ajax({
            url:"${base}/sys/menu/loadmenubyparentid.json",
            data:{parentId:parentId},
            type:"post",
            async:false,
            success:function(resp){
                if(resp.code == 200){
                    div = insertChildrenMenu(resp.data);
                }else{
                    alert("加载子菜单失败");
                }
            },
            error:function(){
                alert("加载子菜单失败");
            }
        });
        return div;
    }


    function insertChildrenMenu(menus){
        var div='<div class="card table-card"><div class="header">子菜单</div><div class="body">';
        var table='<table  class="table table-condensed"><thead><tr><th>菜单名称</th><th>菜单url</th><th>图标</th><th>排序</th></tr></thead><tbody>'
        var tr='';
        for(var index=0;index<menus.length;index++){
            tr = tr+'<tr><th>'+menus[index].name+'</th><th>'+menus[index].url+'</th><th>'+menus[index].icon+'</th><th>'+menus[index].sort+'</th></tr>';
        }
        div = div+table+tr+"</tbody></table></div></div>"
        return div;
    }
</script>


</body>
        